<template>
  <div class="container" style="overflow: hidden">
    <!-- <div class="box">
1111
      </div> -->

    <!-- <div class="smsContainer">
      <div>请输入验证码</div>
      <div>
        <span class="prompt">已发送至</span>
        <span>{{ data.phone.substring(0, 3) }}</span>
        <span>{{ data.phone.substring(3, 7) }}</span>
        <span>{{ data.phone.substring(7, 11) }}</span>
      </div>
      <div class="sms">
           <div class="sms-some">
            <div class="sms-input">1</div>
           <div class="sms-input">1</div>
           <div class="sms-input">1</div>
           <div class="sms-input">1</div>
           </div>
         
        <div class="timeprompt">重新发送({{ smsTime }}s)</div>
      </div>
    </div> -->

    <div class="logo">
      <div class="mylogo"></div>
      <div class="logo-name">
        小<span
          style="
            display: block;
            float: right;
            margin-left: 5px;
            box-sizing: border-box;
          "
          >杨</span
        >
      </div>
      <img src="../../assets/imgs/R-C.png" class="logo-img" alt="" />
    </div>
    <div class="shop-explian">
      <p class="shop-title">小杨商户</p>
      <p class="shop-remark">一家有温度的社区电商</p>
    </div>

    <div class="logins">
      <input
        type="text"
        placeholder="请输入手机号"
        v-model="data.phone"
        class="phone"
      />
      <input
        type="text"
        placeholder="请输入密码"
        class="password"
        v-model="data.password"
      />
      <!-- <input
        type="text"
        placeholder="请输入验证码"
        class="phone phone-sms"
        maxlength="6"
      />
      <div>


        <van-button
          v-show="data.smsStatus===1"
          @click="start"
          class="sms-btn"
          style="height: 50px; width: 120px"
          type="danger"
          round
          >获取验证码</van-button
        >

        <van-button
          v-show="data.smsStatus===3"
          @click="start()"
          class="sms-btn"
          style="height: 50px; width: 120px"
          type="danger"
          round
          >重新获取</van-button
        >

      
        <van-button
         @click="start"
         v-show="data.smsStatus===2"
          class="sms-btn"
          style="height: 50px; width: 120px"
          type="danger"
          round
        >
          验证码(
          <van-count-down
            style="display: inline; color: aliceblue"
            ref="countDown"
            millisecond
            :time="60000"
            :auto-start="false"
            format="ss"
            @finish="onFinish"
          />
          s)
        </van-button>

      </div> -->
      <van-button
        block
        class="sms-btn_e"
        style="height: 50px"
        type="danger"
        @click="methods.logins()"
        round
        >登录</van-button
      >
    </div>

    <!-- <van-toast v-model:show="v_show" style="padding: 0" :duration="0">
  <template #message>
    <van-image :src="image" width="200" height="140" style="display: block" />
  </template>
</van-toast> -->

    <div class="logo-bottom">
      <img
        src="../../assets/imgs/wx.jpg"
        style="margin-left: 10px"
        width="60"
        alt=""
      />
      <div style="color: #aca4a1">使微信登录</div>
      
    </div>
  </div>
</template>
<script setup>
import { Logins } from "@/api/login";
import myTokens from "@/utils/auth";
import { showLoadingToast, showToast } from "vant";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
const v_show = ref(false);
const countDown = ref(null);
const data = reactive({
  name: "登录页面",
  phone: "16651737795",
  password: "123456",
  value: 9999,
  smsTime: 60,
  smsStatus: 1,
});
const router=useRouter();
const start = () => {
  data.smsStatus = 2;
  countDown.value.start();
};
const pause = () => {
  countDown.value.pause();
};
const reset = () => {
  countDown.value.reset();
};

const onFinish = () => {
  showToast("请重新获取验证码");
  reset();
  data.smsStatus = 3;
};

const smsChange = () => {
  // start();
};

const methods = {
  /**
   * 登录
   */
  logins: async () => {
    showLoadingToast({
  message: '登陆中...',
  forbidClick: true,
  position: 'bottom',
  overlay:true,
  duration:4000
});

  // v_show.value=true;
    const res = await Logins({
      account: data.phone,
      password: data.password,
    });
    
    console.log(res.result);
    if (res.result === 0) {
      router.push("/order");
      myTokens.setToken(res.data.token);
    } else {
      showToast(res.message);
    }
    console.log(res);
  },
};
</script>


<style scoped>
.sms-some > div {
  float: left;
  height: 60px;
  width: 60px;
  border-radius: 7px;
  margin: 8px;
  background: rgb(243, 244, 246);
  line-height: 60px;
  text-align: center;
  font-size: 30px;
  border: 1px solid #eee;
}

.logo-bottom {
  /* margin-top: 70%; */
  bottom: 0;
  margin-bottom: 20%;
  position: absolute;
  left: 43%;
}
.box {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/imgs/meituan.jpg") no-repeat;
  background-size: 100%;
  overflow: hidden;
}
.logo {
  display: flex;
  justify-content: center;
  position: relative;
  top: 100px;
}

.mylogo {
  width: 85px;
  height: 40px;
  position: absolute;
  left: 160px;
  top: 10px;
}

.logo-img {
  width: 95px;
  border-radius: 20px;
}

.logo-name {
  font-size: 32px;
  font-weight: 600;
  color: #ffffff;
  position: absolute;
  /* left: 172px; */
  top: 8px;
}

.container {
  width: 100vw;
  height: 100vh;
}

.shop-logo {
  width: 70px;
  height: 60px;
  background: red;
  color: #fff;
  border-radius: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 0px 5px 9px;
  font-size: 20px;
  box-sizing: border-box;
  margin: auto;
  margin-top: 140px;
  font-weight: 600;
}

.shop-title {
  margin: auto;
  position: relative;
  left: 10px;
  width: 120px;
  margin-top: 10px;
  font-size: 26px;
  font-weight: bold;
}

.shop-explian {
  position: relative;
  top: 105px;
}

.shop-remark {
  margin: auto;
  width: 200px;
  font-size: 14px;
  position: relative;
  left: 34px;
  top: 3px;
  color: #aca4a1;
}

.phone {
  margin: auto;
  width: 90%;
  margin-left: 4.5%;
  height: 50px;
  border-radius: 1000px;
  border: none;
  outline: none;
  background: #f3f4f6;
  padding-left: 15px;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: 600;
  margin-top: 150px;
}

.password {
  margin: auto;
  width: 90%;
  margin-left: 4.5%;
  height: 50px;
  border-radius: 1000px;
  border: none;
  outline: none;
  background: #f3f4f6;
  padding-left: 15px;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: 600;
  margin-top: 15px;
}

.phone-sms {
  width: 56%;
  margin-top: 10px !important;
}

.sms-btn {
  height: 40px;
  font-weight: 600;
  position: absolute;
  top: 370px;
  right: 6%;
}

.sms-btn_e {
  margin-top: 20px;
  width: 90%;
  margin-left: 4.5%;
  height: 40px;
  font-weight: 600;
}

/* .LoginContainer{
    width: 100vw;
    height: 100vh;
} */

.smsContainer {
  /* width: 100%; */
  /* border: 1px solid #000; */
  display: flex;
  justify-content: center;
  margin-top: 45%;
  box-sizing: border-box;
  position: relative;
}

.sms {
  margin-top: 90px;
}

.smsContainer > :nth-child(1) {
  font-size: 20px;
  position: absolute;
  font-weight: 600;
}

.smsContainer > :nth-child(2) {
  font-size: 14px;
  position: absolute;
  font-weight: 600;
  margin-top: 30px;
}

.prompt {
  color: #a7aeb8;
  font-weight: 500;
  padding-right: 8px;
}

.timeprompt {
  margin-top: 10px;
  margin-left: 6px;
  color: #a7aeb8;
  font-weight: 500;
  position: relative;
  top: 5px;
}

/* .smsInput{
    --border-color:red
  }

.adm-passcode-input-cell-focused{
    border-color:red !important;
    box-shadow: 0 0 2px 0 red !important;
} */
</style>